<#macro queryView name queryUrl linkUrl roleId>
<div class="layui-row layui-col-space10 layui-form">
    <div class="layui-col-md2">
        <select id="link" name="link" lay-filter="link" lay-verify="required">
            <option value=""></option>
            <option value="1">已关联</option>
            <option value="0">未关联</option>
        </select>
    </div>
    <div class="layui-col-md8">
        <div class="layui-input-search">
            <i class="layui-icon layui-icon-search"></i>
            <input type="text" id="filter" placeholder="请输入过滤条件" autocomplete="off" class=""/>
            <div class="layui-btn-group search-group">
                <a id="searchBtn" class="layui-btn layui-btn-normal">搜索</a>
            </div>
        </div>
    </div>
    <div class="layui-col-md1">
        <a id="linkBtn" style="width:100%;" class="layui-btn">关联</a>
    </div>
    <div class="layui-col-md1">
        <a id="unlinkBtn" style="width:100%;" class="layui-btn">撤销</a>
    </div>
</div>
<table class="layui-hide" id="page" lay-filter="page"></table>
<script type="application/javascript">
    //UI初始化
    layui.use(['element', 'form', 'table', 'layer'], function () {
        var table = layui.table;
        var form =  layui.form;
        var layer = layui.layer;
        var loadFunc = function () {
            table.reload('page', {
                where: {
                    filter: $("#filter").val(),
                    link : $("#link").val(),
                    roleId:"${roleId}"
                }
            })
        };
        var linkFunc = function(ids,roleId,link){
            $.ajax({
                url: "${linkUrl}",
                method: "POST",
                traditional:true,
                data: {
                    roleId:roleId,
                    id:ids,
                    link:link
                },
                success: function (result) {
                    if(result.code>0){
                        layer.msg(result.msg);
                        $("#searchBtn").click();
                    }else{
                        layer.alert(result.msg);
                    }

                }
            });
        };
        form.on('select(link)', function(data){
            $("#searchBtn").click();
        });

        $("#searchBtn").on("click", loadFunc);
        $("#linkBtn").on("click",function(){
            var checkStatus = table.checkStatus('page'); //idTest 即为基础参数 id 对应的值
            var userIds = [];
            $.each(checkStatus.data,function(index,item){
                userIds.push(item.id);
            });
            linkFunc(userIds,'${roleId}',true);

        });
        $("#unlinkBtn").on("click",function(){
            var checkStatus = table.checkStatus('page'); //idTest 即为基础参数 id 对应的值
            var userIds = [];
            $.each(checkStatus.data,function(index,item){
                userIds.push(item.id);
            });
            linkFunc(userIds,'${roleId}',false);
        });
        table.render({
            elem: '#page'
            , url: '${queryUrl}'
            , where: {
                filter: $("#filter").val(),
                link : $("#link").val(),
                roleId:"${roleId}"
            }
            , cols: [<#nested >]
            , response: {
                statusCode: 1 //规定成功的状态码，默认：0
                , dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            , page: true
        });
    });

</script>
</#macro>